<template>
  <!-- 布局 -->
  <div class="layout-container">
    <el-container>
      <el-aside class="layout-container-aside" :style="{ width: permissionStore.isExpand ? '225px' : '64px' }">
        <layout-logo />
        <layout-side-nav />
      </el-aside>
      <el-container>
        <el-header style="padding: 0; margin: 0">
          <layout-header />
        </el-header>
        <el-main style="padding: 0">
          <!-- <tab /> -->
          <layout-content />
        </el-main>
      </el-container>
    </el-container>
  </div>
  <settings />
</template>

<script setup lang="ts">
import Settings from '@/components/settings/index.vue';
import { usePermissionStore } from '@/store';

import LayoutHeader from './components/Header.vue';
import LayoutContent from './components/LayoutContent.vue';
import LayoutSideNav from './components/LayoutSideNav.vue';
import LayoutLogo from './components/Logo.vue';
import Tab from './components/Tab.vue';

const permissionStore = usePermissionStore();
</script>

<style scoped lang="scss">
.layout-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;

  .el-container {
    flex: 1;
    overflow: hidden;
  }

  .layout-container-aside {
    display: flex;
    flex-direction: column;
  }
}
</style>
